<template>
  <el-card class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="title" style="border: 1px solid #E9E9E9;padding: 10px;">
        <span style="display: block;margin-left: 50px;"><h2>基本信息</h2></span>
        <el-row>
          <el-col :span="6">
            <el-form-item label="筛查序号" prop="queryId">
              <el-input v-model="form.queryId"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" @change="getAge(form.idCard)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="personName">
              <el-input v-model="form.personName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择" style="width: 100%;">
                <el-option label="男" value="男"/>
                <el-option label="女" value="女"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="岁" @input="handleInput(form.age,'age',100,1,100)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="form.nation"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="身高(cm)">
              <el-input v-model="form.height" placeholder="cm" @change="calculateBMI()"
                        @input="handleInput(form.height,'height',200,50,200)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重(kg)">
              <el-input v-model="form.weight" placeholder="kg" @change="calculateBMI()"
                        @input="handleInput(form.weight,'weight',200,10,200)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="BMI">
              <el-input v-model="form.bmi" disabled placeholder="体重/身高^2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="腰围(cm)">
              <el-input v-model="form.waistline" placeholder="cm"
                        @input="handleInput(form.waistline,'waistline',1000,10,200)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="臀围(cm)">
              <el-input v-model="form.hipline" placeholder="cm"
                        @input="handleInput(form.hipline,'hipline',1000,10,200)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="婚姻状况" prop="maritalStatus">
              <el-select v-model="form.maritalStatus" placeholder="请选择" style="width: 100%;">
                <el-option label="未婚" value="未婚"/>
                <el-option label="已婚" value="已婚"/>
                <el-option label="离异" value="离异"/>
                <el-option label="孀居" value="孀居"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="初婚年龄" prop="firstMarriageAge">
              <el-input v-model="form.firstMarriageAge" :disabled="form.maritalStatus=='未婚'"
                        @input="handleInput(form.firstMarriageAge,'firstMarriageAge',1000,10,100)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="家庭住址" prop="homeAddress">
              <el-input v-model="form.homeAddress"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="职业" prop="career">
              <el-select v-model="form.career" placeholder="请选择" style="width: 100%;">
                <el-option label="公务员" value="公务员"/>
                <el-option label="企业事业员工" value="企业事业员工"/>
                <el-option label="工人" value="工人"/>
                <el-option label="个体户" value="个体户"/>
                <el-option label="农民" value="农民"/>
                <el-option label="无业" value="无业"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学历" prop="education">
              <el-select v-model="form.education" placeholder="请选择" style="width: 100%;">
                <el-option label="小学以下" value="小学以下"/>
                <el-option label="初中" value="初中"/>
                <el-option label="高中或中专" value="高中或中专"/>
                <el-option label="大专以上" value="大专以上"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" @input="handleInput(form.phone,'phone',1000, 1, 11)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="筛查单位" prop="queryUnit">
              <el-select v-model="form.queryUnit" placeholder="请选择" filterable remote :remote-method="fetchUnitOptions"  @change="queryUnitChange" style="width: 100%;">
                <el-option
                  v-for="item in this.selectedUnit.options"
                  :key="item.code"
                  :label="item.name+ ' - '+ item.code"
                  :value="item.code">
                </el-option>
                <div class="pagination-css">
                  <el-pagination @size-change="handleUnitSizeChange" @current-change="handleUnitCurrentChange" :current-page="this.selectedUnit.currentPage"
                                 :page-sizes="[2, 5, 10, 15]" :page-size="this.selectedUnit.pageSize" layout="total, prev, pager, next, sizes"
                                 :total="this.selectedUnit.total">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约时间" prop="preTime">
              <el-date-picker v-model="form.preTime" type="date" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主检医师" prop="chiefPhysician">
              <el-select v-model="form.chiefPhysician" filterable remote :remote-method="fetchDoctorOptions"
                         :loading="loading" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in this.selectedDoctor.options"
                  :key="item.name"
                  :label="item.name+ ' - '+ item.department"
                  :value="item.name">
                </el-option>
                <div class="pagination-css">
                  <el-pagination @size-change="handleDoctorSizeChange" @current-change="handleDoctorSizeChange" :current-page="this.selectedDoctor.currentPage"
                                 :page-sizes="[2, 5, 10, 15]" :page-size="this.selectedDoctor.pageSize" layout="total, prev, pager, next, sizes"
                                 :total="this.selectedDoctor.total">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="复核医师" prop="recheckPhysician">
              <el-select v-model="form.recheckPhysician" filterable remote :remote-method="fetchDoctorOptions"
                         :loading="loading" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in this.selectedDoctor.options"
                  :key="item.name"
                  :label="item.name+ ' - '+ item.department"
                  :value="item.name">
                </el-option>
                <div class="pagination-css">
                  <el-pagination @size-change="handleDoctorSizeChange" @current-change="handleDoctorSizeChange" :current-page="this.selectedDoctor.currentPage"
                                 :page-sizes="[2, 5, 10, 15]" :page-size="this.selectedDoctor.pageSize" layout="total, prev, pager, next, sizes"
                                 :total="this.selectedDoctor.total">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

      <el-row>
        <div clss="" style="height: 60px;"></div>
      </el-row>

      <el-card>
        <span style="display: block;margin-left: 50px;"><h2>数据复核</h2></span>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="4">
                <el-form-item label="双乳视诊未发现明显异常" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isBilateralPalpationAbnormal" placeholder="请选择"
                             style="width: 100%; "
                             @change="changeTitle('isBilateralPalpationAbnormal','isBilateralSymmetry,isBilateralSizeSymmetry,breastDevelopment,superficialVaricoseVeins,isNippleRetraction,rednessSwelling,dimpleSign,orangePeelSign')">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="双乳位置是否对称" label-width="150px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isBilateralSymmetry" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="对称" value="对称"/>
                    <el-option label="不对称" value="不对称"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="大小是否对称">
                  <el-select v-model="form.epidemiologicalInfoDTO.isBilateralSizeSymmetry" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="对称" value="对称"/>
                    <el-option label="不对称" value="不对称"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="发育情况">
                  <el-select v-model="form.epidemiologicalInfoDTO.breastDevelopment" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="良好" value="良好"/>
                    <el-option label="不良" value="不良"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="浅表静脉曲张">
                  <el-select v-model="form.epidemiologicalInfoDTO.superficialVaricoseVeins" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="有" value="有"/>
                    <el-option label="无" value="无"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="乳头回陷">
                  <el-select v-model="form.epidemiologicalInfoDTO.isNippleRetraction" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="有" value="有"/>
                    <el-option label="无" value="无"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="红肿破溃">
                  <el-select v-model="form.epidemiologicalInfoDTO.rednessSwelling" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="1处" value="1处"/>
                    <el-option label="2处" value="2处"/>
                    <el-option label="3处" value="3处"/>
                    <el-option label="无" value="无"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="酒窝征">
                  <el-select v-model="form.epidemiologicalInfoDTO.dimpleSign" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="1处" value="1处"/>
                    <el-option label="2处" value="2处"/>
                    <el-option label="3处" value="3处"/>
                    <el-option label="无" value="无"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="橘皮征">
                  <el-select v-model="form.epidemiologicalInfoDTO.orangePeelSign" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="1处" value="1处"/>
                    <el-option label="2处" value="2处"/>
                    <el-option label="3处" value="3处"/>
                    <el-option label="无" value="无"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-row>
          <div clss="" style="height: 20px;"></div>
        </el-row>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="4">
                <el-form-item label="左乳触诊未发现明显异常" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isLeftPalpationAbnormal" placeholder="请选择"
                             style="width: 100%;"
                             @change="changeTitle('isLeftPalpationAbnormal','leftPalpableMassCount,leftLargestMassAreaLeft,leftLargestMassAreaRight,leftLocatedAt,leftTexture')">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="可触及肿块">
                  <el-input v-model="form.epidemiologicalInfoDTO.leftPalpableMassCount" placeholder="cm"
                            @input="handleInput(form.epidemiologicalInfoDTO.leftPalpableMassCount,'leftPalpableMassCount',1000,0,900)"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="较大者">
                      <el-input v-model="form.epidemiologicalInfoDTO.leftLargestMassAreaLeft" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.leftLargestMassAreaLeft,'leftLargestMassAreaLeft',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="X">
                      <el-input v-model="form.epidemiologicalInfoDTO.leftLargestMassAreaRight" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.leftLargestMassAreaRight,'leftLargestMassAreaRight',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-form-item label="位于">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftLocatedAt" placeholder="象限"
                             style="width: 100%;">
                    <el-option label="内上" value="内上"/>
                    <el-option label="内下" value="内下"/>
                    <el-option label="外上" value="外上"/>
                    <el-option label="外下" value="外下"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="质地">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftTexture" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="软" value="软"/>
                    <el-option label="韧" value="韧"/>
                    <el-option label="硬" value="硬"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-row>
          <div clss="" style="height: 20px;"></div>
        </el-row>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="4">
                <el-form-item label="右乳触诊未发现明显异常" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isRightPalpationAbnormal" placeholder="请选择"
                             style="width: 100%;"
                             @change="changeTitle('isRightPalpationAbnormal','rightPalpableMassCount,rightLargestMassAreaLeft,rightLargestMassAreaRight,rightLocatedAt,rightTexture')">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="可触及肿块">
                  <el-input v-model="form.epidemiologicalInfoDTO.rightPalpableMassCount" placeholder="cm"
                            @input="handleInput(form.epidemiologicalInfoDTO.rightPalpableMassCount,'rightPalpableMassCount',1000,0,900)"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="较大者">
                      <el-input v-model="form.epidemiologicalInfoDTO.rightLargestMassAreaLeft" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.rightLargestMassAreaLeft,'rightLargestMassAreaLeft',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="X">
                      <el-input v-model="form.epidemiologicalInfoDTO.rightLargestMassAreaRight" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.rightLargestMassAreaRight,'rightLargestMassAreaRight',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-form-item label="位于">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightLocatedAt" placeholder="象限"
                             style="width: 100%;">
                    <el-option label="内上" value="内上"/>
                    <el-option label="内下" value="内下"/>
                    <el-option label="外上" value="外上"/>
                    <el-option label="外下" value="外下"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="质地">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightTexture" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="软" value="软"/>
                    <el-option label="韧" value="韧"/>
                    <el-option label="硬" value="硬"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="4">
                <el-form-item label="左乳超声未发现明显异常" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftUltrasonicFinding" placeholder="请选择"
                             @change="changeTitle('leftUltrasonicFinding','leftCyst,leftSolidMass,leftLocatedAt,leftDistanceToNipple,leftSizeEstimate1,leftSizeEstimate2,leftShape,leftLimit,leftMargin,leftEchogenicity,leftPosteriorAcousticFeatures,leftAspectRatio,leftCalcification,leftCalcificationType,leftBloodFlowSignal,leftLymphNode,leftBreastUltrasoundLevel')"
                             style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="囊肿">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftCyst" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="实性肿块">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftSolidMass" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="无" value="0"/>
                    <el-option label="单发" value="单发"/>
                    <el-option label="二发" value="二发"/>
                    <el-option label="多个" value="多个"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="位于" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftLocatedAt" placeholder="象限"
                             style="width: 100%;">
                    <el-option label="内上" value="内上"/>
                    <el-option label="内下" value="内下"/>
                    <el-option label="外上" value="外上"/>
                    <el-option label="外下" value="外下"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="距离乳头约" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-input v-model="form.epidemiologicalInfoDTO.leftDistanceToNipple" placeholder="cm"
                            @input="handleInput(form.epidemiologicalInfoDTO.leftDistanceToNipple,'leftDistanceToNipple',1000,0,900)"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="大小约" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                      <el-input v-model="form.epidemiologicalInfoDTO.leftSizeEstimate1" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.leftSizeEstimate1,'leftSizeEstimate1',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="X" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                      <el-input v-model="form.epidemiologicalInfoDTO.leftSizeEstimate2" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.leftSizeEstimate2,'leftSizeEstimate2',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="形态" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftShape" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="规则" value="规则"/>
                    <el-option label="不规则" value="不规则"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="界限" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftLimit" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="清晰" value="清晰"/>
                    <el-option label="不清晰" value="不清晰"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="边缘" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftMargin" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="光整" value="光整"/>
                    <el-option label="分叶" value="分叶"/>
                    <el-option label="成角" value="成角"/>
                    <el-option label="毛刺" value="毛刺"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="回声特征" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftEchogenicity" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="均匀无回声" value="均匀无回声"/>
                    <el-option label="均匀低回声" value="均匀低回声"/>
                    <el-option label="均匀中等回声" value="均匀中等回声"/>
                    <el-option label="均匀高回声" value="均匀高回声"/>
                    <el-option label="不均匀回声" value="不均匀回声"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                <el-form-item label="后方回声">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftPosteriorAcousticFeatures" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="增强" value="增强"/>
                    <el-option label="不变" value="不变"/>
                    <el-option label="衰减" value="衰减"/>
                    <el-option label="混合" value="混合"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="纵横比" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftAspectRatio" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="约≥1" value="约≥1"/>
                    <el-option label="约<1" value="约<1"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="钙化" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftCalcification" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="无" value="无"/>
                    <el-option label="散在" value="散在"/>
                    <el-option label="成簇" value="成簇"/>
                    <el-option label="弥漫" value="弥漫"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="钙化形态"
                              v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0 && form.epidemiologicalInfoDTO.leftCalcification != 1">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftCalcificationType" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="点状" value="点状"/>
                    <el-option label="棒状" value="棒状"/>
                    <el-option label="弧状" value="弧状"/>
                    <el-option label="环状" value="环状"/>
                    <el-option label="其他" value="其他"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="血流信号" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftBloodFlowSignal" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="无" value="无"/>
                    <el-option label="正常" value="正常"/>
                    <el-option label="丰富" value="丰富"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="淋巴结" v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftLymphNode" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="未见" value="未见"/>
                    <el-option label="正常" value="正常"/>
                    <el-option label="异常" value="异常"/>
                    <el-option label="混合" value="混合"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="左乳超声BI-RADS分级" label-width="200px"
                              v-if="form.epidemiologicalInfoDTO.leftSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.leftBreastUltrasoundLevel" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="BI-RADS:0级" value="BI-RADS:0级"/>
                    <el-option label="BI-RADS:1级" value="BI-RADS:1级"/>
                    <el-option label="BI-RADS:3级" value="BI-RADS:3级"/>
                    <el-option label="BI-RADS:4级(4a,4b,4c)" value="BI-RADS:4级(4a,4b,4c)"/>
                    <el-option label="BI-RADS:5级" value="BI-RADS:5级"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="4">
                <el-form-item label="右乳超声未发现明显异常" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightUltrasonicFinding" placeholder="请选择"
                             @change="changeTitle('rightUltrasonicFinding','rightCyst,rightSolidMass,rightLocatedAt,rightDistanceToNipple,rightSizeEstimate1,rightSizeEstimate2,rightShape,rightLimit,rightMargin,rightEchogenicity,rightPosteriorAcousticFeatures,rightAspectRatio,rightCalcification,rightCalcificationType,rightBloodFlowSignal,rightLymphNode,rightBreastUltrasoundLevel')"
                             style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="囊肿">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightCyst" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="实性肿块">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightSolidMass" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="无" value="0"/>
                    <el-option label="单发" value="单发"/>
                    <el-option label="二发" value="单发"/>
                    <el-option label="多个" value="多个"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="位于" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightLocatedAt" placeholder="象限"
                             style="width: 100%;">
                    <el-option label="内上" value="内上"/>
                    <el-option label="内下" value="内下"/>
                    <el-option label="外上" value="外上"/>
                    <el-option label="外下" value="外下"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="距离乳头约" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-input v-model="form.epidemiologicalInfoDTO.rightDistanceToNipple" placeholder="cm"
                            @input="handleInput(form.epidemiologicalInfoDTO.rightDistanceToNipple,'rightDistanceToNipple',1000,0,900)"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="大小约" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                      <el-input v-model="form.epidemiologicalInfoDTO.rightSizeEstimate1" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.rightSizeEstimate1,'rightSizeEstimate1',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="X" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                      <el-input v-model="form.epidemiologicalInfoDTO.rightSizeEstimate2" placeholder="cm"
                                @input="handleInput(form.epidemiologicalInfoDTO.rightSizeEstimate2,'rightSizeEstimate2',1000,0,900)"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="形态" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightShape" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="规则" value="规则"/>
                    <el-option label="不规则" value="不规则"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="界限" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightLimit" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="清晰" value="清晰"/>
                    <el-option label="不清晰" value="不清晰"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="边缘" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightMargin" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="光整" value="光整"/>
                    <el-option label="分叶" value="分叶"/>
                    <el-option label="成角" value="成角"/>
                    <el-option label="毛刺" value="毛刺"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="回声特征" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightEchogenicity" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="均匀无回声" value="均匀无回声"/>
                    <el-option label="均匀低回声" value="均匀低回声"/>
                    <el-option label="均匀中等回声" value="均匀中等回声"/>
                    <el-option label="均匀高回声" value="均匀高回声"/>
                    <el-option label="不均匀回声" value="不均匀回声"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="后方回声" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightPosteriorAcousticFeatures" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="增强" value="增强"/>
                    <el-option label="不变" value="不变"/>
                    <el-option label="衰减" value="衰减"/>
                    <el-option label="混合" value="混合"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="纵横比" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightAspectRatio" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="约≥1" value="约≥1"/>
                    <el-option label="约<1" value="约<1"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="钙化" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightCalcification" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="无" value="1"/>
                    <el-option label="散在" value="2"/>
                    <el-option label="成簇" value="3"/>
                    <el-option label="弥漫" value="4"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="钙化形态"
                              v-if="form.epidemiologicalInfoDTO.rightCalcification != 1 && form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightCalcificationType" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="点状" value="点状"/>
                    <el-option label="棒状" value="棒状"/>
                    <el-option label="弧状" value="弧状"/>
                    <el-option label="环状" value="环状"/>
                    <el-option label="其他" value="其他"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="血流信号" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightBloodFlowSignal" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="无" value="无"/>
                    <el-option label="正常" value="正常"/>
                    <el-option label="丰富" value="丰富"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="淋巴结" v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightLymphNode" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="未见" value="未见"/>
                    <el-option label="正常" value="正常"/>
                    <el-option label="异常" value="异常"/>
                    <el-option label="混合" value="混合"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="右乳超声BI-RADS分级" label-width="200px"
                              v-if="form.epidemiologicalInfoDTO.rightSolidMass != 0">
                  <el-select v-model="form.epidemiologicalInfoDTO.rightBreastUltrasoundLevel" placeholder="请选择"
                             style="width: 100%;">
                    <el-option label="BI-RADS:0级" value="BI-RADS:0级"/>
                    <el-option label="BI-RADS:1级" value="BI-RADS:1级"/>
                    <el-option label="BI-RADS:3级" value="BI-RADS:3级"/>
                    <el-option label="BI-RADS:4级(4a,4b,4c)" value="BI-RADS:4级(4a,4b,4c)"/>
                    <el-option label="BI-RADS:5级" value="BI-RADS:5级"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card>
          <div slot="header" class="clearfix">
            <span>已采集图像</span>
          </div>
          <div style="text-align: center; margin-top: 10px;height: 300px;overflow-y: scroll;">
            <div class="image-container" v-for="(item, index) in personFileImgs" @mouseenter="showButton = true"
                 @mouseleave="showButton = false">
              <el-image
                class="image"
                :src="'data:image/png;base64,' + item.fileData"
                :preview-src-list="previewSrcList"
              ></el-image>
              <el-button
                v-if="showButton"
                class="delete-button"
                @click="deleteImage(item.id)"
              >
                删除
              </el-button>
            </div>
          </div>

        </el-card>

      </el-card>

      <el-row>
        <div clss="" style="height: 60px;"></div>
      </el-row>

      <div class="fixed-div">
        <el-form-item>
          <el-button type="warning" @click="getImages">图像采集</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </div>

    </el-form>


<!--    <el-dialog-->
<!--      title="图像采集"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="50%"-->
<!--      :before-close="handleClose"-->
<!--      append-to-body>-->
<!--      <el-card>-->
<!--        <div slot="header" class="clearfix">-->
<!--          <span>已采集图像</span>-->
<!--        </div>-->
<!--        <div style="text-align: center; margin-top: 10px;height: 300px;overflow-y: scroll;">-->
<!--          <div class="image-container" v-for="(item, index) in personFileImgs" @mouseenter="showButton = true"-->
<!--               @mouseleave="showButton = false">-->
<!--            <el-image-->
<!--              class="image"-->
<!--              :src="'data:image/png;base64,' + item.fileData"-->
<!--              :preview-src-list="previewSrcList"-->
<!--            ></el-image>-->
<!--            <button-->
<!--              v-if="showButton"-->
<!--              class="delete-button"-->
<!--              @click="deleteImage(item.id)"-->
<!--            >-->
<!--              Delete-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->

<!--      </el-card>-->
<!--      <el-card>-->
<!--        <el-upload-->
<!--          class="upload-demo"-->
<!--          action="/api/person/personFileImgs/uploadImg"-->
<!--          :data="{personId: this.form.id }"-->
<!--          :on-success="handleSuccess"-->
<!--          :on-progress="handleProgress"-->
<!--          :on-remove="handleRemove"-->
<!--          :file-list="leftUltrasonicImageList"-->
<!--          :multiple="true"-->
<!--          :limit="1"-->
<!--          name="file"-->
<!--          :show-file-list="false"-->
<!--          :before-upload="beforeUpload"-->
<!--        >-->
<!--          <i class="el-icon-upload"></i>-->
<!--          <div class="el-upload__tip">将文件拖到此处，或点击上传</div>-->
<!--          <div class="el-upload__tip">只能上传jpg/png文件</div>-->
<!--          <el-progress v-if="showProgress" :percentage="progressPercent"-->
<!--                       style="width: 200px; margin-top: 10px;"></el-progress>-->
<!--        </el-upload>-->
<!--      </el-card>-->
<!--      <div style="text-align: right; margin-top: 10px;">-->
<!--        <el-button type="default" size="small" @click="handleClose">关闭</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </el-card>
</template>

<script>

import {getPerson, updatePerson} from '@/api/business/Person'
import {
  listPersonFileImgs,
  getPersonFileImgs,
  delPersonFileImgs,
  addPersonFileImgs,
  updatePersonFileImgs,
  queryImg
} from '@/api/business/personFileImgs'
import {listDoctors} from '@/api/business/doctors'
import {listMedicalInfo} from '@/api/business/medicalInfo'
import moment from "moment";
import item from "@/layout/components/Sidebar/Item.vue";
import axios from "axios";

export default {
  computed: {
    item() {
      return item
    }
  },
  data() {
    return {
      personFileImgs: [],
      previewSrcList: [], // 替换为你的图片URL
      showButton: false,
      leftUltrasonicImageList: [],
      progressPercent: 0,
      showProgress: false,
      formImg: {
        file: null
      },
      dialogVisible: false,
      addOrEditType: "",
      loading: true,
      selectedDoctor: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        options: [],
      },
      selectedUnit: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        options: [],
      },
      form: {
        id: "",
        idCard: "",
        maritalStatus: "",
        nation: "",
        personName: "",
        phone: "",
        preTime: "",
        queryId: "",
        queryUnit: "",
        recheckPhysician: "",
        sex: "",
        career: "",
        chiefPhysician: "",
        education: "",
        waistline: "",
        weight: "",
        age: "",
        bmi: "",
        height: "",
        hipline: "",
        epidemiologicalInfoDTO: {
          isDysmenorrhea: "0",
          isMenopause: "0",
          isDrinking: "0",
          isSmoking: "0",
          familyHistory: "0",
          isDiabetesHistory: "0",
          rightUltrasonicFinding: "0",
          isBilateralPalpationAbnormal: "",
        }
      },
      rules: {
        idCard: [
          {required: true, message: '身份证号不能为空', trigger: 'blur'},
          {pattern: /^\d{17}[\d|X]$/, message: '身份证号格式不正确', trigger: 'blur'}
        ],
        personName: [
          {required: true, message: '姓名不能为空', trigger: 'blur'},
          {min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '电话号码不能为空', trigger: 'blur'},
          {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '电话号码格式不正确', trigger: 'blur'}
        ],
        maritalStatus: [
          {required: true, message: '婚姻状况不能为空', trigger: 'blur'}
        ],
        nation: [
          {required: true, message: '民族不能为空', trigger: 'blur'}
        ],
        preTime: [
          {required: true, message: '预产期不能为空', trigger: 'blur'}
        ],
        queryId: [
          {required: true, message: '查询号不能为空', trigger: 'blur'}
        ],
        queryUnit: [
          {required: true, message: '查询单位不能为空', trigger: 'blur'}
        ],
        recheckPhysician: [
          {required: true, message: '复查医生不能为空', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '性别不能为空', trigger: 'blur'}
        ],
        career: [
          {required: true, message: '职业不能为空', trigger: 'blur'}
        ],
        chiefPhysician: [
          {required: true, message: '主治医生不能为空', trigger: 'blur'}
        ],
        education: [
          {required: true, message: '学历不能为空', trigger: 'blur'}
        ],
        waistline: [
          {required: true, message: '腰围不能为空', trigger: 'blur'}
        ],
        weight: [
          {required: true, message: '体重不能为空', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '年龄不能为空', trigger: 'blur'}
        ],
        bmi: [
          {required: true, message: 'BMI不能为空', trigger: 'blur'}
        ],
        height: [
          {required: true, message: '身高不能为空', trigger: 'blur'}
        ],
        hipline: [
          {required: true, message: '臀围不能为空', trigger: 'blur'}
        ]
        // 其他字段的验证规则
      }

    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let params = this.$route.params;
      this.addOrEditType = params.type;

      this.fetchDoctorOptions();
      this.fetchUnitOptions();

      if (params.type === "check") {
        getPerson(params.data.id).then(data => {
          this.form = data.data;
        });

        // 获取图片
        queryImg(params.data.id).then(data => {
          if (data.data && data.data.length > 0) {
            this.personFileImgs = data.data;
            if (this.personFileImgs.length > 0) {
              this.personFileImgs.forEach(item => {
                this.previewSrcList.push("data:image/png;base64," + item.fileData);
              });
            }
          }
        });
      } else {
        this.$router.push({name: 'ReCheck', params: {}});
      }
    },
    onSubmit() {
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitForm();
        } else {
          return false;
        }
      });
    },
    async submitForm() {
      console.log(this.form.delivery);
      let type = this.addOrEditType;
      let result;
      //日期转换转 yyyy-MM-dd HH:mm:ss 格式
      let formattedDate = moment(this.form.preTime).format('YYYY-MM-DD HH:mm:ss');

      this.form.preTime = formattedDate;

      await updatePerson(this.form).then(data => {
        result = data;
      });

      if (result.isSuccess) {
        this.$notify.success({
          title: "成功",
          message: result.message
        });
        this.$router.push({name: 'ReCheck', params: {}});
      } else {
        this.$notify.error({
          title: "失败",
          message: result.message
        });
      }
    },
    onCancel() {
      this.$confirm('确认取消？')
        .then(() => {
          this.$store.dispatch('tagsView/delAllViews').then(({visitedViews}) => {
            const latestView = visitedViews.slice(-1)[0]
            if (latestView) {
              // this.$router.push(latestView.fullPath)
              this.$router.push({name: 'ReCheck', params: {}});
            }
          });
        })
        .catch(() => {
          this.$message.info('已取消')
        });
    },
    handleInput(inputContent, input, type, min, max) {
      let regExpString = "";
      if (type == 10) {
        regExpString = /^([1-9]|10)$/;
      } else if (type == 60) {
        regExpString = /^(1|[1-5]\d{0,1}|60)$/;
      } else if (type == 70) {
        regExpString = /^(1\d|20|[1-5]\d{0,1}|60)$/;
      } else if (type == 120) {
        regExpString = /^(0|120|\d{1,2}|1[0-1]\d)$/;
      } else if (type == 1000) {
        regExpString = new RegExp('^([1-9]|[1-' + (Math.floor(max / 10) - 1) + ']\\d|' + max + ')$');
        // regExpString = /^([1-9]|[1-5]\d|60)$/;
      } else {
        regExpString = /^(1|[1-9]\d{0,1}|100)$/;
      }
      // console.log(regExpString, inputContent);
      if (regExpString.test(inputContent) == false) {
        this.form.epidemiologicalInfoDTO[input] = "";
        return false;
      } else {
        // input = inputContent;
        this.form.epidemiologicalInfoDTO[input] = inputContent;
      }
    },
    getImages() {
        axios.get('http://192.168.2.14:9999/jarvis/biz/getVideoImg/' + this.form.id, {
          params: {}
        }).then(response => {
          if (response.data.code === '0') {
            this.personFileImgs.push(response.data.fileDataObj);
            if (this.personFileImgs.length > 0) {
              this.personFileImgs.forEach(item => {
                this.previewSrcList.push("data:image/png;base64," + item.fileData);
              });
            }
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error('获取图片失败,请检查视频采集服务是否正常！');
        });
    },
    queryUnitChange(value) {   //查询单位变更时，清空查询号   待优化   目前只能清空查询号
      console.log(value);
      //获取时间毫秒数
      let time = new Date().getTime();
      //获取日期格式20210101
      let date = new Date().toLocaleDateString().replace(/\//g, "");
      //按照每日不重复id生成查询号
      this.form.queryId = value + date + time;
    },
    // 选择医生
    fetchDoctorOptions(name) {
      this.loading = true;
      let params = {
        page: this.selectedDoctor.currentPage,
        limit: this.selectedDoctor.pageSize,
        name: name
      }
      // 模拟异步请求，实际中替换为你的API调用
      // 这里的mockData应该是从后端获取的分页数据
      listDoctors(params).then(({data}) => {
        this.selectedDoctor.options = data.list;
        this.selectedDoctor.total = data.total;
        this.selectedDoctor.currentPage = data.currentPage;
        this.selectedDoctor.pageSize = data.pageSize;
      });
      this.loading = false;
    },
    // 单位选项
    fetchUnitOptions(name) {
      console.log(this.selectedUnit.options);
      this.loading = true;
      let params = {   //查询单位变更时，清空查询号   待优化   目前只能清空查询号
        page: this.selectedUnit.currentPage,
        limit: this.selectedUnit.pageSize,
        name: name
      }
      // 模拟异步请求，实际中替换为你的API调用
      // 这里的mockData应该是从后端获取的分页数据
      listMedicalInfo(params).then(({data}) => {
        this.selectedUnit.options = data.list
        this.selectedUnit.total = data.total;
        this.selectedUnit.currentPage = data.currentPage;
        this.selectedUnit.pageSize = data.pageSize;
      });
      this.loading = false;
    },
    // 分页相关
    handleDoctorSizeChange(val,type) {
      console.log(`每页 ${val} 条`);
      this.selectedDoctor.pageSize = val;
      this.fetchDoctorOptions();
    },
    handleDoctorCurrentChange(val,type) {
      console.log(`当前页: ${val}`);
      this.selectedDoctor.currentPage = val;
      this.fetchDoctorOptions();
    },    // 分页相关
    handleUnitSizeChange(val,type) {
      console.log(`每页 ${val} 条`);
      this.selectedUnit.pageSize = val;
      this.fetchUnitOptions();
    },
    handleUnitCurrentChange(val,type) {
      console.log(`当前页: ${val}`);
      this.selectedUnit.currentPage = val;
      this.fetchUnitOptions();
    },
    changeTitle(checkName, cleanTargetName) {
      if (this.form.epidemiologicalInfoDTO[checkName] === "0") {
        cleanTargetName.split(",").forEach(item => {
          this.form.epidemiologicalInfoDTO[item] = "";
        });
      }
    },
    //根据身份证获取年龄
    getAge(idCard) {
      if (idCard.length === 18) {
        let birthday = idCard.substring(6, 14);
        console.log(birthday);
        const formattedDateString = birthday.replace(
          /(\d{4})(\d{2})(\d{2})/,
          "$1-$2-$3"
        );
        let birth = new Date(formattedDateString);
        console.log(birth);
        let age = new Date().getFullYear() - birth.getFullYear();
        let month = new Date().getMonth() - birth.getMonth();
        if (month < 0 || (month === 0 && new Date().getDate() < birth.getDate())) {
          age--;
        }
        this.form.age = age;
      } else {
        this.form.age = "";
      }
    },
    //根据身高体重计算BIM
    calculateBMI() {
      if (this.form.height && this.form.weight) {
        let height = parseFloat(this.form.height / 100);
        let weight = parseFloat(this.form.weight);

        if (!isNaN(height) && !isNaN(weight)) {
          let bmi = (weight / (height * height)).toFixed(2);
          this.form.bmi = bmi
        }
      } else {
        this.form.bmi = "";
      }
    },
    deleteImage(imgId) {
      // alert(imgId);
      // 在这里处理删除图片的逻辑
      delPersonFileImgs(imgId).then(data => {
        console.log(data);
        this.personFileImgs = this.personFileImgs.filter((item, idx) => item.id !== imgId);
        this.previewSrcList = this.previewSrcList.filter((item, idx) => idx !== index);
      });
    },
    handleSuccess(res, file) {
      // console.log(res, file);
      if (res.code === 200) {
        // console.log(res.data.fileData);
        this.personFileImgs.push(res.data);
        this.previewSrcList.push("data:image/png;base64," + res.data.fileData);
        this.progressPercent = 0;
        this.showProgress = false;
      } else {
        this.$message.error(res.message);
      }
    },
    handleProgress(event, file, fileList) {
      this.showProgress = true;
      this.progressPercent = parseInt(event.percent, 10);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.leftUltrasonicImageList = fileList;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片格式不正确');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.leftUltrasonicImageList = [];
      this.progressPercent = 0;
      this.showProgress = false;
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}


.fixed-div {
  //position: fixed;
  //top: 100px; /* 距离顶部100像素 */
  //right: 0; /* 右侧对齐 */
  //width: 200px; /* 宽度设置为200像素 */
  //height: 150px; /* 高度设置为150像素 */
  //background-color: #333; /* 背景颜色设置为深灰色 */
  //color: white; /* 文字颜色设置为白色 */
  //padding: 10px; /* 内边距设置为10像素 */
  //box-sizing: border-box; /* 盒模型大小包含内边距 */
  position: fixed;
  bottom: 40px;
  right: 0;
  width: 445px;
  height: 60px;
  /* background-color: #333; */
  color: white;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: #8eb3ea;
}

.el-select-dropdown__item {
  border-bottom: 1px solid #e4e4e4;
}


.pagination-css {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.pagination-container.is-background .el-pager li {
  /* 对页数的样式进行修改 */
  background-color: #fff;
  color: #333;
}

.pagination-container.is-background .btn-next {
  /* 对下一页的按钮样式进行修改 */
  background-color: #fff;
  border: 1px solid #b3bfce;
  border-radius: 2px;
  color: #b3bfce;
}

.pagination-container.is-background .btn-prev {
  /* 对上一页的按钮样式进行修改 */
  background-color: #fff;
  border: 1px solid #b3bfce;
  border-radius: 2px;
  color: #b3bfce;
}

.pagination-container.is-background .el-pager li:not(.disabled).active {
  /* 当前选中页数的样式进行修改 */
  background-color: #0062ff;
  color: #fff;
}

.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 根据需要调整高度 */
}


.image-container {
  position: relative;
  display: inline-block;
}

.image {
  width: 100%; /* 根据需要调整图片宽度 */
  height: 200px; /* 根据需要调整图片高度 */
}

.delete-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px; /* 根据需要调整按钮大小 */
  background-color: rgba(255, 0, 0, 0.7); /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: none; /* 初始状态下隐藏按钮 */
}

.image-container:hover .delete-button {
  display: block; /* 鼠标悬停时显示按钮 */
}
</style>

